import { Component, Input, OnInit } from '@angular/core';
import { of } from "rxjs";
import { CITY } from "../../../mock/mock-city";
import 'echarts/map/js/china.js';
import 'echarts/echarts.all.js';
import * as echarts from 'echarts';

@Component({
  selector: 'meta-chart-map-china',
  template: `
    <div echarts [options]="option"></div>
  `,
  styleUrls: ['./meta-chart-map-china.component.styl']
})
export class MetaChartMapChinaComponent implements OnInit {


  @Input() title: string = '全国测评企业布局';
  @Input() center = [104.114129, 37.550339];
  @Input() zoom: number = 1;
  @Input() data = [];
  @Input() cityName = "";//高亮省市名称
  @Input() citySource: string = '1'; // 省市维度默认从CITY中获取，2时从传入的data中获取

  geoCoordMap = {};
  option = {};
  map;
  echart;

  constructor() {
  }

  ngOnInit() {
    this.getCity();
  }

  onChartInit(ec) {
    this.map = ec;
    this.echart = echarts.init(this.map); // 获取视图的echarts的DOM节点，并初始化对象
    this.echart.setOption(this.getOption());
  }

  setData(data) {
    this.data = data;
  }

  setOption() {
    this.echart.setOption(this.getOption());
  }

  private getOption() {
    return {
      title: {
        text: this.title,
        textStyle: {
          color: '#fff'
        },
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (val) {
          return val.name + '<br>' + val.value[2] + '个项目';
        }
      },
      geo: {
        map: 'china',
        label: {
          emphasis: {
            show: true, color: 'white'
          }
        },
        roam: true,
        center: this.center,
        zoom: this.zoom,
        itemStyle: {
          normal: {
            areaColor: '#212121',
            borderColor: '#636161',
            label: { show: true, color: 'white' }
          },
          emphasis: {
            areaColor: '#4D7EFF'
          }
        }, regions: [{
          name: this.cityName,
          selected: true,
        }]
      },
      series: [
        {
          name: 'pm2.5',
          type: 'scatter',//散点类型
          coordinateSystem: 'geo',
          data: this.convertData(this.data),
          symbolSize: function (val) {
            return Math.pow(val[2], 1 / 5) * 10;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {// 对应的鼠标悬浮效果
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: '#08CCB2',
            }
          },
          animation: false
        },
        {
          name: 'Top 5',
          type: 'effectScatter',//散点气泡图
          coordinateSystem: 'geo',
          data: this.convertData(this.data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 5)),//按照值的大小排序，并选择前五项
          symbolSize: function (val) {
            return Math.pow(val[2], 1 / 5) * 10;
          },
          showEffectOn: 'render',//配置何时显示特效。
          rippleEffect: {
            brushType: 'stroke'//涟漪特效相关配置。
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: '#08CCB2',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          animation: false,
          zlevel: 1
        },
      ]
    }
  }

  // 经纬度数据
  private getCity() {
    return of(CITY).subscribe(res => this.geoCoordMap = res);
  }

  private convertData(data) {
    let res = [];
    if (this.citySource == '2') {
      for (let i = 0; i < data.length; i++) {
        res.push({
          name: data[i].name,
          value: [data[i].log, data[i].lat, data[i].value]
        });
      }
    } else {
      for (let i = 0; i < data.length; i++) {
        let geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
    }
    return res;
  };
}
